import React from "react";
import { cn } from "@/lib/utils";

const PixelGrid = ({ pixelGrid, rows, cols, handlePixelClick }) => {
  const colSize = 100 / cols;
  return (
    <div className="grid">
      {Array.from({ length: rows }).map((_, row) => (
        <div key={row} className={cn("flex")}>
          {Array.from({ length: cols }).map((_, col) => (
            <div
              key={col}
              className={cn(
                "border-r border-b",
                row === 0 && "border-t",
                col === 0 && "border-l",
                pixelGrid[row]?.[col] === 1 ? "bg-black/70 hover:bg-white" : "bg-white hover:bg-black"
              )}
              style={{
                width: colSize + "%",
              }}
              onClick={() => {
                handlePixelClick(row, col);
              }}
            >
              <div className="pb-[100%]"></div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default PixelGrid;
